<template>
<div class="add-customer wap">
  <x-header v-if="!this.$fromApp(this)" class="vux-1px-b" :left-options="{backText: ''}"><span>新增商户</span></x-header>
  <div class="main add-content">
    <div class="add-customer-container">
      <div class="dealers-name">{{categoryName}}</div>
      <div>
        <group>
          <flexbox justify="center" align="center">
            <flexbox-item :span="4"><span class="warning">*</span><span class="warning-lable">联系人:</span></flexbox-item>
            <flexbox-item><input :show-clear="false" maxlength="8"  class="normal-input" v-model="customer.concatName"  placeholder="请输入联系人姓名"/></flexbox-item>
          </flexbox>
        </group>

        <group>
          <flexbox justify="center" align="center">
            <flexbox-item :span="4"><span class="warning">*</span><span class="warning-lable">电话号码:</span></flexbox-item>
            <flexbox-item><input :show-clear="false" class="normal-input" type="tel" maxlength="11" v-model="customer.contactPhone" placeholder="请输入手机号"/></flexbox-item>
          </flexbox>
        </group>

        <group>
          <flexbox justify="center" align="center">
            <flexbox-item :span="4"><span class="warning">*</span><span class="warning-lable">付款方式:</span></flexbox-item>
            <flexbox-item><span class="pay-select" @click="showDialog">请选择</span><span class="payway">{{getpayWay()}}</span></flexbox-item>
          </flexbox>
        </group>
        <div class="btn-submit display-flex justify-content-flex-center align-items-center" @click="submitData">确定</div>
      </div>
    </div>

  </div>

  <payWayDialog :useType="2" ref="dialog"   @payWayComfirm="payWayComfirm" :defaultDialog="dialog"></payWayDialog>

</div>
</template>
<script type="text/ecmascript-6">
  import payWayDialog from '../../components/pay-way-dialog.vue'
  export default{
    components: {
      payWayDialog,
    },
    data(){
      return {
        dialog:false,
        categoryName:'',
        categoryId:-1,
        customer:{
          concatName:"",
          contactPhone:"",
          creditSaleDay:0,
          distributorCategoryId:-1,
          payWay:-1,
        }
      }
    },
    created(){
      console.log("this.categoryName",this.$route.query.name)
         this.categoryName=decodeURIComponent(this.$route.query.name).toString().replace(/~~pct~~/g,'%') ;
        this.categoryId=this.$route.query.id;

      console.log("this.categoryId",this.categoryId)
    },
    methods:{
      showDialog(){
        this.$refs.dialog.showDialog();
      },
      submitData(){
        if(this.customer.concatName==''){
          this.$vux.toast.text('请输入联系人姓名', 'center');
          return;
        }else if(this.customer.concatName.length>8){
          this.$vux.toast.text('联系人姓名长度必须小于8', 'center');
          return;
        }else if(this.customer.contactPhone==''){
          this.$vux.toast.text('请输入联系人号码', 'center');
          return;
        }else if(!this.$checkPhone(this.customer.contactPhone)){
          this.$vux.toast.text('手机号不合法', 'center');
          return;
        }else if(this.customer.payWay==-1){
          this.$vux.toast.text('请选择支付方式', 'center');
          return;
        }
        this.customer.distributorCategoryId=this.categoryId;
        this.$ajax.post("customer/create",this.customer,(res)=>{
              if(res.code==200){
                this.$vux.toast.text('新增成功', 'center');
                if(this.$fromApp(this)){
                  this.$callJava({code:1003,quick:true})
                }
              }else{
                this.$vux.toast.text(res.msg, 'center');
              }
        },1)

      },
      payWayComfirm(obj){
            this.customer.payWay=obj.payWay;
            this.customer.creditSaleDay=obj.creditDay;
      },
      getpayWay(){
        if(this.customer.payWay==1){
          return "款到发货"
        }else if(this.customer.payWay==2){
          return "赊销"+this.customer.creditSaleDay+"天";
        }else{
          return "";
        }
      }
    }
  }
</script>

<style lang="less" type="text/less" scoped>
  .add-customer{
    background: #fff;
    position: relative;
    /deep/ .vux-header {
      background-color: #fff !important;
      .vux-header-title {
        color: #000 !important;
        font-size: 0.36rem !important;
        font-weight: 500 !important;
      }
      .left-arrow:before {
        border: 1px solid #000 !important;
        border-width: 1px 0px 0px 1px !important;
      }
    }
    .add-customer-container{
      padding: .34rem .29rem  .34rem .29rem;
      .dealers-name{
        font-size:.36rem;
        font-weight:bold;
        color:#333;
        margin-bottom: 1.39rem;
      }
      .warning{
        color: #ff0000;
        vertical-align: middle;
        .warning-lable{
          font-size:.32rem;
          font-weight:500;
          color:#333;
        }
      }
     /deep/ .weui-input{
        font-size: .3rem;
      }
      .pay-select{
        height:.7rem;
        border:1px solid #ddd;
        border-radius:.35rem;
        padding: .12rem .64rem;
        margin-left: .3rem;
        font-size: .28rem;
      }
      /deep/ .weui-cells{
        margin-top: .2rem;
      }
      /deep/ .vux-flex-row{
        min-height: 1.1rem;
      }
      /deep/ .weui-cells:before{
        border: none;
      }
      .btn-submit{
        height:.92rem;
        background:rgba(82,125,217,1);
        border-radius:.46rem;
        color:#fff;
        font-size: .34rem;
        text-align: center;
        margin-top: 1.2rem;
      }

    }
    .payway{
      font-size: .3rem;
      color: #333;
      margin-left: .2rem;
    }
  }


</style>
